<template>
  <view class="avan-list">
    <scroll-view class="scroll-view" scroll-y="true" @scrolltolower="loadMore">
      <van-cell v-for="item in list" :key="item" :title="item" />
      <view class="loading-more">
        <uni-load-more
          @clickLoadMore="clickLoadMore"
          :status="status"
          :contentText="contentText"
      /></view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  searchValue: {
    type: String,
    default: "",
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
});
const { pageNum, pageSize, searchValue } = toRefs(props);
const list = ref(["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"]);
const status = ref("more");
const contentText = ref({
  contentdown: "上拉或点击加载更多",
  contentrefresh: "加载中...",
  contentnomore: "没有更多了",
});

function loadMore() {
  console.log(pageNum.value, pageSize.value, searchValue.value, "loadMore");
  status.value = "loading";
  setTimeout(() => {
    if (list.value.length >= 20) {
      status.value = "nomore";
      return;
    }
    list.value.push(
      ...["11", "12", "13", "14", "15", "16", "17", "18", "19", "20"]
    );
    status.value = "more";
  }, 1000);
}

function clickLoadMore(e: any) {
  console.log(e, "clickLoadMore");
  if (e.detail.status === "more") {
    loadMore();
  }
}

defineExpose({
  loadMore,
});
</script>

<style lang="scss" scoped>
.avan-list {
  width: 100%;
  height: 100%;
  .scroll-view {
    width: 100%;
    height: 100%;
    :deep(.van-cell__title) {
      text-align: center;
    }
    .loading-more {
      width: 100%;
      text-align: center;
      background-color: #e7e7e7;
    }
  }
}
</style>
